<template>
  <div class="c-file-input">
    <div @click.stop="clickHandle">
      <slot />
    </div>
    <van-popup
      v-model="visible"
      position="bottom"
      round
    ><input
       id="c-file-input"
       type="file"
       :multiple="multiple"
       :accept="accept"
       @change="changeHandle"
     >
      <div class="c-file-input-icon">
        <img :src="camera" @click.stop="openCamera">
        <img v-if="showAlbum" :src="album" @click.stop="openAlbum">
        <!-- <img :src="folder" @click.stop="openFolder"> -->
      </div>
    </van-popup>
  </div>
</template>
<script>
function dataURLtoBlob(baseurl) {
  const mime = 'image/jpeg'
  const bstr = atob(baseurl)
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], {
    type: mime
  })
}
import folder from '@/assets/upload/folder.png'
import album from '@/assets/upload/album.png'
import camera from '@/assets/upload/camera.png'

export default {
  name: 'CFileInput',
  props: {
    needPicNum: {
      type: Number,
      default: 100
    },
    multiple: {
      type: Boolean,
      default: true
    },
    accept: {
      type: String,
      default: ''
    },
    showAlbum: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: false,
      folder,
      album,
      camera
    }
  },
  methods: {
    clickHandle() {
      this.visible = true
    },
    openCamera() {
      this.$nativeHandler('openCamera')
        .then((res) => {
          const data = {
            target: {
              files: (res.data || []).map((e) => {
                return new File([dataURLtoBlob(e)], `${new Date().getTime()}.${res.type}`, {
                  type: `image/${res.type}`
                })
              })
            }
          }
          this.$emit('success', data)
        })
        .catch((err) => {
          this.$emit('error', err)
        }).finally(() => {
          this.visible = false
        })
    },
    openAlbum() {
      this.$nativeHandler('openAlbum', { needPicNum: this.needPicNum })
        .then((res) => {
          const data = {
            target: {
              files: (res.data || []).map((e) => {
                return new File([dataURLtoBlob(e)], `${new Date().getTime()}.${res.type}`, {
                  type: `image/${res.type}`
                })
              })
            }
          }
          this.$emit('success', data)
        })
        .catch((err) => {
          this.$emit('error', err)
        }).finally(() => {
          this.visible = false
        })
    },
    changeHandle(e) {
      this.$emit('success', e)
    },
    openFolder() {
      const i = this.$el.querySelector('#c-file-input')
      this.visible = false
      if (i) {
        i.click()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.c-file-input {
  .c-file-input-icon {
    display: flex;
    padding: 15px 5px;
    justify-content: space-around;
    box-sizing: border-box;
    & > img {
      flex: 0 0 40px;
      width: 40px;
      height: 40px;
    }
  }
  #c-file-input{
    display: none;
  }
}
</style>
